<template>
	<div class="search-page root">
		<uni-search-bar
			class="uni-mt-10"
			radius="5"
			placeholder="请输入关键字..."
			clearButton="auto"
			cancelButton="none"
			@clear="clear"
			@confirm="search"
		/>
		<div class="search-result">
			<view class="uni-mt-10">
				<template v-if="list.length">
					<Card
						v-for="(data, index) in list"
						:key="index"
						:data="data"
						@cst-click="openDetail(data)"
					/>
				</template>
				<template v-else> <GlobalEmpty /> </template>
			</view>
		</div>
	</div>
</template>

<script setup lang="ts">
import type { Thesaurus } from "@/type/index.d";
import { ref } from "vue";
import axios from "@/utils/axios";
// @ts-ignore
import Card from "./components/card.vue";
import GlobalEmpty from "@/components/GlobalEmpty.vue";
import { useDetailStore } from "@/stores/detail";

const { setDetailData } = useDetailStore();

const list = ref<Thesaurus[]>([]);
const search = (e: any) => {
	getList(e.value);
};
const clear = () => {
	list.value = [];
};

const openDetail = (data: Thesaurus) => {
	uni.navigateTo({
		url: `/pages/detailPage/index`,
		success: () => setDetailData(data),
	});
};

const getList = (keyword?: string) => {
	if (!keyword) {
		list.value = [];
		return;
	}
	axios<Thesaurus[]>({
		url: "/thesaurus/match",
		method: "get",
		params: { keyword },
	}).then(res => {
		list.value = res.data || [];
	});
};
</script>
